<template>
	<view class="outBox">
		<u-navbar leftText="提现记录" leftIconColor="#fff" :autoBack="true" bgColor="rgba(0, 0, 0, 0.6)">
			<view class="left-slot" slot="left">
				<u-icon name="arrow-left" color="#fff"></u-icon>
				<text>{{ '提现记录' }}</text>
			</view>
		</u-navbar>
    <VideoBox>
      <template #content>
		    <view class="content" >
			<view class="items">
				<view class="item"  v-for="item in dataList">
          <view class="bg">
            <image src="/static/mine/bg3.png" mode="scaleToFill"/>
          </view>
				  <view class="inner">
            <view class="left">
              <view class="top">
                <view class="tag">
                  <text>金额</text>
                </view>
                <view class="value">
                  <text>¥{{item.approvePrice}}</text>
                </view>
              </view>
              <view class="bottom">
                <text>提现时间：{{item.createTimeStr}}</text>
              </view>
              <view class="remark" v-if="item.remark">
                <text>备注：{{item.remark || ''}}</text>
              </view>
            </view>
            <view class="right">
              <view class="status" :class="[getStatus(item.approveStatusName)]">
                <text>{{item.approveStatusName}}</text>
              </view>
            </view>
          </view>
				</view>
			</view>
		</view>
      </template>
    </VideoBox>
	</view>
</template>

<script>
	import {
		getWXStatusHeight
	} from '@/utils/index.js'


	import bg from "@/static/mine/bg3.png"
  import {findApprovalListForWx} from "@/api/api";
  import VideoBox from "@/components/VideoBox/index.vue";

	export default {
    components: {VideoBox},
		data() {
			return {
				// 胶囊的宽度
				barWidth: 0,
				menuHeight: 0,
				videoUrl: this.$videoUrl,
				baseImgUrl2: this.$baseImgUrl2,
				bg2: bg,
				value: '',
        dataList:[],
			}
		},
		onLoad() {
			let obj = getWXStatusHeight()
			this.barWidth = obj.barWidth + 3
			this.menuHeight = obj.menuHeight

      this.getDataList()
		},
		methods: {
      // 提现记录
      async getDataList() {
        const res = await findApprovalListForWx()
        if(res.code == 200){
          this.dataList = res.data
          console.log(res.data,"res.data")
        }
      },
      getStatus(name){
        switch (name) {
          case '待审批':
            return 'status1'
          case '已到账':
            return 'status2'
          default:
            return 'status'
        }
      }
		}
	}
</script>

<style lang="scss" scoped>
.bgBox {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 1;
  background: rgba(0, 0, 0, 0.6);
}

	.items {
		.item{
			width: 686rpx;
			background-size: 100% 100%;
			padding: 42rpx 50rpx;
			box-sizing: border-box;
			margin-bottom: 18rpx;
      position: relative;
      .bg{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        image{
          width: 100%;
          height: 100%;
        }
      }
      .inner{
        display: flex;
        justify-content: space-between;
        position: relative;
        z-index: 999;
      }
			.right{
				display: flex;
				align-items: center;
				.status{
					width: 100rpx;
					height: 40rpx;
					background: rgba(52,145,250,0.16);
					border-radius: 14rpx;
					border: 2rpx solid #3491FA;
					display: flex;
					align-items: center;
					justify-content: center;
					text{
						font-weight: 500;
						font-size: 24rpx;
						color: #3491FA;
						line-height: 24rpx;
						text-align: right;
						font-style: normal;
					}
				}
				.status1{
					background: rgba(255,154,46,0.16);
					border: 2rpx solid #FF9A2E;
					text{
						color: #FF9A2E;
					}
				}
				.status2{
					background: rgba(15,198,194,0.16);
					border-radius: 14rpx;
					border: 2rpx solid #0FC6C2;
					text{
						color: #0FC6C2;
					}
				}
			}
			.left{
				.top{
					display: flex;
					margin-bottom: 26rpx;
				}
				.bottom{
					font-weight: 400;
					font-size: 24rpx;
					color: #86909C;
					line-height: 24rpx;
					text-align: left;
					font-style: normal;

				}
				.remark{
					margin-top: 40rpx;
					text{
						max-height: 80rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #86909C;
						line-height: 40rpx;
						text-align: left;
						font-style: normal;
						 display: -webkit-box;
						  -webkit-box-orient: vertical;
						  -webkit-line-clamp: 2;
						  overflow: hidden;
						  text-overflow: ellipsis;
					}
				}
			}
			.tag{
				width: 76rpx;
				height: 40rpx;
				background: #FF9A2E;
				border-radius: 14rpx;
				margin-right: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				text{
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 24rpx;
					text-align: right;
					font-style: normal;
				}
			}
			.value{
				text{
					font-weight: 500;
					font-size: 36rpx;
					color: #FFFFFF;
					line-height: 36rpx;
					text-align: right;
					font-style: normal;
				}
			}
		}
	}

	video {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 确保视频填充整个容器，可能会裁剪视频 */
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 0;
	}

	.content {
		position: relative;
		padding: 20rpx 40rpx;
		box-sizing: border-box;
    position: relative;
    z-index: 99;
	}

	.left-slot {
		color: #fff;
		display: flex;
		align-items: center;

		image {
			width: 40rpx;
			margin-right: 30rpx;
		}
	}

	.outBox {
		background-color: #242331;
	}
</style>
